<template>
    <div class="container">
        <div class="login_box">
            <h1>管理员登录</h1>
            <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" show-password type="password"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="captcha">
                    <el-input ref="code" prefix-icon="el-icon-document-checked" clearable placeholder="验证码"
                        v-model="form.captcha" style="width: 4 0%" @keyup.enter.native="login"></el-input>
                    <div @click="changeCode" style="float: right">
                        <img :src="imgPath" title="点击刷新" alt="点击刷新" />
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

</template>

<script>

import axios from 'axios'

export default {
    name: 'register',
    data() {
        return {
            form: {
                username: '',
                password: '',
                captcha: '',
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    {
                        min: 3,
                        max: 5,
                        message: '长度在 3 到 5 个字符',
                        trigger: 'blur',
                    },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    {
                        min: 5,
                        max: 16,
                        message: '长度在 5 到 16 个字符',
                        trigger: 'blur',
                    },
                ],
                captcha: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                ],
            },
            
            imgPath: 'http://localhost:8080/admin/captcha'
        }
    },
    methods: {
        onSubmit() {
            axios.get("http://localhost:8080/admin/login/" + this.form.username
                + "/" + this.form.password + "/" + this.form.captcha)
                .then(data => {
                    if (data.data.code == 1) { // 登录成功
                        const login = data.data.data; // 登录的用户信息
                        this.$router.push('/index');
                        window.localStorage.setItem('login', JSON.stringify(login));
                    }
                })
                .catch();
        },
        changeCode() {
            axios.get('http://localhost:8080/admin/captcha', {
                    responseType: 'arraybuffer',
                })
                .then((res) => {
                    window.sessionStorage.setItem(
                        'token',
                        res.headers['content-disposition']
                    )
                    this.imgPath = `data: image/jpeg;base64,${btoa(
                        new Uint8Array(res.data).reduce(
                            (data, byte) => data + String.fromCharCode(byte),
                            ''
                        )
                    )}`
                })
        },
        
    },
}
</script>

<style scoped>
.container {
    background: url(/image/login.jpg) no-repeat;
    background-size: 100%;
    height: 935px;
    width: 100%;
    position: relative;
}

.login_box {
    border: 1px solid black;
    height: 300px;
    width: 400px;
    left: 150px;
    top: 150px;
    position: absolute;
}

.login_box h1 {
    text-align: center;
    font-size: 25px;
}

.login_box .el-form-item {
    width: 90%;
    margin: 20px auto;
}

.el-form-item:nth-child(3) .el-input {
    width: 30%;
}

.el-form img {
    margin-left: 10px;
    height: 50px;
    width: 130px;
}
</style>